<template>
  <div>
    <zm-dialog :title="currentData.type==='edit'?'编辑兑换范围说明':'新增兑换范围说明'" :visible.sync="value" append-to-body :before-close="dialogClose" :close-on-click-modal="false" :keep-alive="true">
      <zm-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="80px" class="padding-left">
        <zm-form-item label="图标 " prop="imageUrl">
          <imageUpload v-model="form.imageUrl" :limit="1" @on-remove="handleRemove" @change="handleChange"></imageUpload>
          <span class="noteSpan">请上传70*70的图，仅限1张</span>
        </zm-form-item>
        <zm-form-item label="标题" prop="title">
          <zm-input class="w300" v-model="form.title" type="text" placeholder="请输入标题，不超过20个字" />
        </zm-form-item>
        <zm-form-item label="描述文字 " prop="content">
          <zm-input class="w300" v-model="form.content" type="textarea" placeholder="请输入描述文字，不超过100个字" />
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
        <zm-button @click="dialogClose">取消</zm-button>
        <zm-button @click="onSave" type="primary">保存</zm-button>
      </div>
    </zm-dialog>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import dialogMixin from '@/mixins/dialogMixin'
import imageUpload from '@/components/ZmUpload/components/ImageUpload'
export default {
  name: 'AddExchange',
  components: { imageUpload },
  mixins: [tableMixin, dialogMixin],
  props: {
    currentData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        imageUrl: this.currentData.imageUrl || '',
        title: this.currentData.title || '',
        content: this.currentData.content || ''
      },
      formRules: {
        imageUrl: { required: true, message: '请上传图标' },
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 20, message: '不超过20个字符', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入描述文字，不超过100个字', trigger: 'blur' },
          { max: 100, message: '不超过100个字符', trigger: 'change' }
        ]
      }
    }
  },
  computed: {

  },
  watch: {},
  created () {
  },
  methods: {
    handleRemove () {
      this.form.imageUrl = ''
    },
    onSave () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.currentData.type === 'edit') {
            this.$emit('handle-after', 'edit', this.form, this.currentData.currentIndex)
            this.dialogClose()
          }
          if (this.currentData.type === 'add') {
            this.$emit('handle-after', 'add', this.form)
            this.dialogClose()
          }
        } else {
          console.log('submit err')
          return false
        }
      })
    },
    handleChange (val) {
      console.log(val, 'img')
    }
  }
}
</script>

<style scoped lang='scss'>
.padding-left {
  padding: 0 20px;
}
.noteSpan{
  color: #ccc;
}
</style>
